<template>
  <div id="goodsSku">
    <!-- 商品颜色 -->
    <div class="row">
      <div class="col-xs-12 col-md-12 col-sm-12">
      	<div class="title">颜色：</div>
        <!-- 当前是颜色sku属性 -->
        <div class="sku-container">
          <div class="col-sm-12 col-xs-12 col-md-12">
            <span v-for="(color, index) in skuList" @click.prevent="selectColorSku(color, index)" :key="index">

              <!-- 若商家上传颜色图，则展示 -->
              <span class="goods-color goods-img-color"
                :class="{active: selectedColor.specpropertyName == color.specpropertyName}"  
                v-if="color.specpropertyImgFull || color.specpropertyPhotoPath">
                <img class="minimg" v-lazy="color.specpropertyImgFull || color.specpropertyPhotoPath" :title="color.specpropertyName">
              </span>

              <!-- 若商家未上传颜色图片，则只展示颜色名 -->
              <span class="goods-color no-spec-img" :class="{'active-img': selectedColor.specpropertyName == color.specpropertyName}" v-else>
                <span class="spec-bg-img">{{color.specpropertyName}}</span>
              </span>

            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt10" >
      <div class="col-xs-12 col-md-12 col-sm-12">
        <div class="title">尺码：</div>
        <!-- 当前是尺码的sku属性 -->
        <div class="sku-container">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="goods-size" 
              v-for="(size, index) in getSizeSKU" 
              v-bind:key="index" 
              v-show="index < showSizeNumber || showSku">
              <span class="size">{{size.specpropertyName}}</span>
              <!-- 价格（随着选择数量的变化而变化） -->
              <span class="wd86">{{tiredPrice}}元</span>
              <!-- 可售数量 -->
              <span class="wd110" v-if="showInvent">{{size.specpropertyInventCount || 0}}件可售</span>
              <span class="wd110" v-else>已拼{{size.checkOutCount || 0}}件</span>
              <!-- 数字组件 -->
              <number-alignment
                :min="0" 
                :max="Number(size.specpropertyInventCount || '0')"
                :readonly="isDisableToBuy(size)"
                @type="changeNumberType" 
                v-model="size.number"
                @on-change="setSelectedSku(size, index)"></number-alignment>
              <span class="small-count" :class="{'show': isDisableToBuy(size)}" v-if="isDisableToBuy(size)">最低起订{{size.specpropertySmallCount}}件</span>
              <span class="small-count transition-ease" v-else :class="{'show': index == showSmallCountIndex}">最低起订{{size.specpropertySmallCount}}件</span>
            </div>
            <!-- 展开按钮 -->
            <div class="deploy" :title="deployTitle" :class="{close: showSku}" 
              v-if="getSizeSKU && getSizeSKU.length > showSizeNumber"
              @click="showSku=!showSku"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 遮罩层，如果是已下架商品，则不展示此遮罩层，防止用户点击尺码sku -->
    <div class="mark" v-show="down && !$route.query.token"></div>
  </div>
</template>

<script>
// 导入数值组件
import numberAlignment from '../../../components/NumberAlignment'

export default {
  components: {
    numberAlignment
  },
  props: {
    skuList: {
      type: Array,
      default: () => { return [] }
    },
    skuRule: {
      type: Array,
      default: () => { return [] }
    },
    // 当前数量下的单价
    tiredPrice: {
      type: [String, Number],
      default: 0
    },
    // 商品类型 0：普通商品 1：拼单商品
    goodsType: {
      type: [Number, String],
      default: 1
    },
    // 货源类型
    // 普通商品 1：现货 0：订货 3：现货且支持订货
    type0: {
      type: [Number, String],
      default: 1
    },
    // 货源类型
    // 拼单商品 1：现货 0：期货
    type1: {
      type: [Number, String],
      default: 1
    },
    errorColor: {
      type: Object,
      default: () => { return {} }
    },
    errorIndex: {
      type: Number,
      default: -1
    },
    down: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    /**
     * 鼠标放到展开按钮上时，展示的内容
     */
    deployTitle() {
      // 此时是展开的状态
      if (this.showSku) {
        return '收起剩余属性'
      }
      // 此时是收缩的状态
      return '展开剩余属性'
    },

    /**
     * 库存汉字
     */
    inventWord() {
      // 当前是现货
      if (this.type == 1) {
        return '库存'
      }
      return '已拼'
    },

    /**
     * 展示库存还是已拼单多少件
     */
    showInvent() {
      // 普通商品
      if (this.goodsType == 0) {
        // 现货
        if (this.type0 == 1) {
          return true
        }
        // 订货
        if (this.type0 == 0) {
          return false
        }
        // 现货且订货
        if (this.type0 == 3) {
          return true
        }
      }
      // 拼单商品
      if (this.goodsType == 1) {
        // 现货
        if (this.type1 == 1) {
          return true
        }
        // 期货
        if (this.type1 == 2) {
          return false
        }
      }
    },
    /**
     * 是否判断是否以最低购买了为最低标准
     */
    showInventCount() {
      if (this.goodsType == 0) {
        return false
      }
      if (this.goodsType == 1) {
        return true
      }
    },
    /**
     * 获取尺码的sku
     */
    getSizeSKU() {
      // 如果尺码没获取
      if (!this.sizeList || this.sizeList.length == 0) {
        return this.getDefaultColorSKU(-1)
      }
      return this.sizeList
    }
  },
  data() {
    return {
      // 数值是增长的
      numberType: 0,
      // 尺码列表
      sizeList: [],
      // 是否展示剩余的sku属性
      showSku: false,
      // 最多展示sku的数目
      showSizeNumber: 3,
      // 选中的颜色id
      colorId: 0,
      // 被选中的颜色
      selectedColor: {id: 0},
      // 尺寸的值
      number: {},
      timeout: {},
      // 展示最小购买量的
      showSmallCountIndex: -1,
      // 选中的sku属性
      selectedSkuList: []
    }
  },
  watch: {
    errorColor() {
      // 如果颜色id不存在
      if (!this.errorColor.specpropertyId) {
        return
      }

      // 展示错误的sku
      this.selectColorSku(this.errorColor)
      this.$emit('clear-error-color')
    },
    errorIndex() {
      if (this.errorIndex >= 0) {
        // 展示当前的提示信息
        this.showSmallCountIndex = this.errorIndex

        // 先清除定时器
        clearTimeout(this.timeout)

        // 隔1.5s后隐藏此字段
        this.timeout = setTimeout(() => {
          this.showSmallCountIndex = -1

          // 先清除定时器
          clearTimeout(this.timeout)
        }, 1500)
      }
    }
  },
  methods: {
    isDisableToBuy(size) {
      let flag = Number(size.specpropertyInventCount || '0') > 0 && Number(size.specpropertyInventCount || '0') < Number(size.specpropertySmallCount || '0')
      return flag
    },

    /**
     * 如果是期货，则展示已拼单件数，如果是现货，则展示库存量
     */
    inventCount(size) {
      // 当前是现货，返回库存量
      if (this.type == 1) {
        return size.specpropertyInventCount
      }
      // 当前是期货，返回已拼单量
      return size.checkOutCount
    },

    /**
     * 改变数值类型
     */
    changeNumberType(value) {
      this.numberType = value
    },

    /**
     * 获取初始化的sku属性
     *
     * @param { Number } type 当前类型（1：初始化的时候执行的 其他：非初始化的时候执行）
     */
    getDefaultColorSKU(type) {
      if (!this.skuList || this.skuList.length == 0) {
        return []
      }

      // 默认选中第一个
      this.selectColorSku(this.skuList[0], type)

      // 展示第一个的sku
      return this.skuList[0].specpropertyList
    },

    /**
     * 点击选择颜色，并展示相应颜色下的库存尺码
     *
     * @param { Object } color 颜色
     * @param { Number } type  当前类型（1：初始化的时候执行的 其他：非初始化的时候执行）
     */
    selectColorSku(color, type) {
      // 将被点击的颜色选中
      this.selectedColor = color
      // 展示当前的尺码
      this.sizeList = color.specpropertyList

      // 遍历尺码数据，给每个尺码设置前一个数量
      if (this.sizeList && this.sizeList.length > 0) {
        this.sizeList.forEach(v => {
          // 记录上一次被点击的数量
          v.prevNumber = v.number

          // 已拼单数量
          v.checkOutCount = (v.checkOutCount || 0)

          // 如果是期货，覆盖之前的库存量
          if (!this.showInvent) {
            // 设置库存量
            v.specpropertyInventCount = '1000000000000'
          }
        })
      }

      // 如果当前是初始化的时候执行的，则不操作
      if (type == -1) {
        return
      }

      // 改变商品图片
      this.$emit('change-image', color.specpropertyImgFull)
    },

    /**
     * 获取sku属性的数值
     *
     * @param { Array } gsp 当前操作的属性
     */
    getSkuNumber(gsp) {
      // 将sku格式化成字符串
      let gspStr = gsp.join(',')
      let returnNumber = 0

      // 取出值
      this.selectedSkuList.forEach((v) => {
        if (gspStr == v.cartGsp) {
          returnNumber = v.countBuyNow
        }
      })

      // 返回结果
      return returnNumber
    },

    /**
     * 获取选中的sku
     *
     * @param { Number } index 当前点击的是第几个
     */
    setSelectedSku(size, index) {
      // 数值
      let number = Number(size.number)

      // 最小值，同时判断商品类型，若为普通商品则不予最低起订量为限
      let smallNumber = this.showInventCount ? Number(size.specpropertySmallCount) : 0

      // 如果是递增，且是最低值
      if (smallNumber > number && number > 0 && this.numberType != 3) {
        // 设置最小值是最低起购量
        size.number = smallNumber

        // 如果当前是非点减号键获取的值，才展示提示信息
        if (this.numberType != 2) {
          // 展示当前的提示信息
          this.showSmallCountIndex = index

          // 先清除定时器
          clearTimeout(this.timeout)

          // 隔1.5s后隐藏此字段
          this.timeout = setTimeout(() => {
            this.showSmallCountIndex = -1

            // 先清除定时器
            clearTimeout(this.timeout)
          }, 1500)
        }
      }

      // 如果最后是递减，且是最小值
      if ((number + 1 == smallNumber && (number < size.prevNumber) && this.numberType != 3) || number == 0) {
        size.number = 0
      }

      // 记录本次数值作为下一次判断的依据
      size.prevNumber = size.number

      // 将选中的sku发送父组件
      this.$emit('selected-skus', this.skuList)
    }
  }
}
</script>

<style lang="scss" scoped>
#goodsSku {
  position: relative;

  .wd86 {
    float: left;
    width: 86px;
  }

  .wd110 {
    float: left;
    width: 110px;
  }

  .small-count {
    color: #f00384;
    float: right;
    width: 132px;
    text-align: left;
    opacity: 0;

    &.show {
      opacity: 1;
    }
  }
  .title {
    color: #AAAAAA;
    display: inline-block;
    float: left;
    margin-left: 10px;
    height: 24px;
    line-height: 24px;
  }
  .sku-container {
    display: inline-block;
    float: right;
    width: calc(100% - 70px);
  }
  .goods-color {
    border: 1px solid #DDDDDD;
    color: #404040;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 15px;
    margin-right: 10px;
    text-align: center;
  }
  .goods-img-color {
    width: 42px;
    height: 42px;
    line-height: 22px;
    padding: 1px;
    &.active {
      border: 1px solid #F00384;
      color: #FFFFFF;
    }
  }
  .no-spec-img {
    padding: 0px 4px;
    // width: 42px;
    height: 42px;
    line-height: 36px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    &.active-img {
      border: 1px solid #F00384;
      color: #F00384;
    }
  }
  .spec-bg-img {
    // float: left;
  }
  .mt10 {
    margin-top: 10px;
  }
  .goods-size {
    margin-bottom: 10px;
    line-height: 24px;

    .size {
      // font-size: 16px;
      font-weight: 500;
      float: left;
      width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .small-count {
      display: inline-block;
      width: 113px !important;

      &.stock {
        color: #AAAAAA;
        .lot {
          width: auto;
          margin: 0px 2px;
        }
      }
    }
  }
  .clear {
    clear: both;
  }
  .deploy {
    background-image: url('../images/icon_xiajiantou.png');
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0px 15px;
    height: 12px;
    text-align: center;

    &.close {
      transform: rotateX(180deg);
    }
  }
  .mark {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
  }
}

</style>